<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - Fx/Fx.Sort</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Fx-Sort">Fx.Sort</a></h4>
      <div class="menu-item"><a href="#Fx-Sort:constructor">constructor</a></div>
      <div class="menu-item"><a href="#Fx-Sort:currentOrder">currentOrder</a></div>
      <div class="menu-item"><a href="#Fx-Sort:sort">sort</a></div>
      <div class="menu-item"><a href="#Fx-Sort:rearrangeDOM">rearrangeDOM</a></div>
      <div class="menu-item"><a href="#Fx-Sort:forward">forward</a></div>
      <div class="menu-item"><a href="#Fx-Sort:backward">backward</a></div>
      <div class="menu-item"><a href="#Fx-Sort:reverse">reverse</a></div>
      <div class="menu-item"><a href="#Fx-Sort:sortByElements">sortByElements</a></div>
      <div class="menu-item"><a href="#Fx-Sort:swap">swap</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Fx-Sort"><a href="#Fx-Sort">Class: Fx.Sort</a></h1>
      <p class="description">Reorders a group of items with a transition.</p>
      <h3>Tutorial/Demo</h3>
      <ul>
        <li><a href="http://www.clientcide.com/wiki/cnet-libraries/05-fx/03-fx.sort">Online Tutorial/Demo</a></li>
      </ul>
      <h3>Extends</h3>
      <ul>
        <li><a href="../../../docs/more/Fx/Fx.Elements.html">Fx.Elements</a></li>
      </ul>
      <h2 id="Fx-Sort:constructor"><a href="#Fx-Sort:constructor">Fx.Sort Method: constructor</a></h2>
      <h3 class="description">Syntax</h3>
      <pre class="javascript"><span class="kw2">new</span> Fx.<span class="me1">Sort</span><span class="br0">(</span>elements<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>elements - (<em>array</em>) A collection of Elements the effects will be applied to.</li>
        <li>options  - (<em>object</em>, optional) Same as <a href="../../../docs/more/Fx/Fx.Elements.html">Fx.Elements</a> options plus the additional options below.</li>
      </ol>
      <h3>Options</h3>
      <ul>
        <li>mode - (<em>string</em>) either "vertical" or "horizontal"; defaults to <em>"vertical"</em> </li>
      </ul>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) A new instance of <a href="#Fx-Sort">Fx.Sort</a>.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript"><span class="kw2">var</span> mysort = <span class="kw2">new</span> Fx.<span class="me1">Sort</span><span class="br0">(</span>$$<span class="br0">(</span><span class="st0">'ul li'</span><span class="br0">)</span>, <span class="br0">{</span>

  transition: Fx.<span class="me1">Transitions</span>.<span class="kw3">Back</span>.<span class="me1">easeInOut</span>,
  duration: <span class="nu0">1000</span>
<span class="br0">}</span><span class="br0">)</span>;
mysort.<span class="me1">sort</span><span class="br0">(</span><span class="br0">[</span><span class="nu0">2</span>,<span class="nu0">0</span>,<span class="nu0">1</span><span class="br0">]</span><span class="br0">)</span>; <span class="co1">//a specific order</span>

mysort.<span class="kw3">forward</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//forward (the original) order</span>
</pre>
      <h3>Notes</h3>
      <ul>
        <li> <a href="#Fx-Sort">Fx.Sort</a> does not, by default, reorder the DOM; it just puts the elements into x/y locations that imply the sort, but their location in the DOM remains unless you execute <a href="#Fx-Sort:rearrangeDOM">Fx.Sort:rearrangeDOM</a>.</li>
      </ul>
      <h2 id="Fx-Sort:currentOrder"><a href="#Fx-Sort:currentOrder">Fx.Sort Method: currentOrder</a></h2>
      <p class="description">Retrieves the current sort order.</p>
      <h3>Syntax</h3>
      <pre class="javascript">mySort.<span class="me1">currentOrder</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) The current sort state.</li>
      </ul>
      <h2 id="Fx-Sort:sort"><a href="#Fx-Sort:sort">Fx.Sort Method: sort</a></h2>
      <p class="description">Rearranges the items visually into a new order.</p>
      <h3>Syntax</h3>
      <pre class="javascript">mySort.<span class="me1">sort</span><span class="br0">(</span>order<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>order - (<em>array</em>) the new order for the items.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This <a href="#Fx-Sort">Fx.Sort</a> instance.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript">mySort.<span class="me1">sort</span><span class="br0">(</span><span class="br0">[</span><span class="nu0">2</span>,<span class="nu0">1</span>,<span class="nu0">0</span><span class="br0">]</span><span class="br0">)</span>; <span class="co1">//reverse</span>

</pre>
      <h3>Notes</h3>
      <ul>
        <li>If you pass it an incomplete order <a href="#Fx-Sort">Fx.Sort</a> will fill in the rest with the current sort. For example, if the current sort is 0,1,2, and you execute <em>mySort.sort(1)</em>, the result will be 1,0,2.</li>
      </ul>
      <h2 id="Fx-Sort:rearrangeDOM"><a href="#Fx-Sort:rearrangeDOM">Fx.Sort Method: rearrangeDOM</a></h2>
      <p class="description">Rearranges the DOM to the current sort order.</p>
      <h3>Syntax</h3>
      <pre class="javascript">mySort.<span class="me1">rearrangeDOM</span><span class="br0">(</span>order<span class="br0">)</span>; <span class="co1">//order is optional</span>
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>order - (<em>array</em>, optional) the order to arrange the DOM with; defaults to <em>this.currentOrder</em>.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This <a href="#Fx-Sort">Fx.Sort</a> instance.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript">mySort.<span class="me1">rearrangeDOM</span><span class="br0">(</span><span class="br0">[</span><span class="nu0">1</span>,<span class="nu0">3</span>,<span class="nu0">2</span>,<span class="nu0">0</span><span class="br0">]</span><span class="br0">)</span>;
mySort.<span class="me1">rearrangeDOM</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//use current sort</span>

</pre>
      <h2 id="Fx-Sort:forward"><a href="#Fx-Sort:forward">Fx.Sort Method: forward</a></h2>
      <p class="description">Arrange the items in the original order (0,1,2,3,etc).</p>
      <h3>Syntax</h3>
      <pre class="javascript">mySort.<span class="kw3">forward</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This <a href="#Fx-Sort">Fx.Sort</a> instance.</li>
      </ul>
      <h2 id="Fx-Sort:backward"><a href="#Fx-Sort:backward">Fx.Sort Method: backward</a></h2>
      <p class="description">Arrange the items in the original order reversed (...3,2,1,0).</p>
      <h3>Syntax</h3>
      <pre class="javascript">mySort.<span class="kw3">forward</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This <a href="#Fx-Sort">Fx.Sort</a> instance.</li>
      </ul>
      <h2 id="Fx-Sort:reverse"><a href="#Fx-Sort:reverse">Fx.Sort Method: reverse</a></h2>
      <p class="description">Arrange the items in the current order reversed.</p>
      <h3>Syntax</h3>
      <pre class="javascript">mySort.<span class="me1">reverse</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This <a href="#Fx-Sort">Fx.Sort</a> instance.</li>
      </ul>
      <h2 id="Fx-Sort:sortByElements"><a href="#Fx-Sort:sortByElements">Fx.Sort Method: sortByElements</a></h2>
      <p class="description">Sort by the order specified in a collection of elements; elements must be an array (collection) of the elements within the elements specified at instantiation.</p>
      <h3>Syntax</h3>
      <pre class="javascript">mySort.<span class="me1">sortByElements</span><span class="br0">(</span>elements<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>elements - (<em>array</em> or <em>collection</em>) a collection or array of elements in the new order</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This <a href="#Fx-Sort">Fx.Sort</a> instance.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript"><span class="kw2">var</span> mySort = <span class="kw2">new</span> Fx.<span class="me1">Sort</span><span class="br0">(</span>$$<span class="br0">(</span><span class="st0">'ul li'</span><span class="br0">)</span><span class="br0">)</span>;
mySort.<span class="me1">sortByElements</span><span class="br0">(</span><span class="br0">[</span>$<span class="br0">(</span><span class="st0">'li3'</span><span class="br0">)</span>, $<span class="br0">(</span><span class="st0">'li2'</span><span class="br0">)</span>, $<span class="br0">(</span><span class="st0">'li1'</span><span class="br0">)</span>, $<span class="br0">(</span><span class="st0">'li0'</span><span class="br0">)</span><span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Notes</h3>
      <ul>
        <li>The elements passed in to sortByElements must be the same ones passed in to the effect when it was created.</li>
      </ul>
      <h2 id="Fx-Sort:swap"><a href="#Fx-Sort:swap">Fx.Sort Method: swap</a></h2>
      <p class="description">Swaps the position of one item with another.</p>
      <h3>Syntax</h3>
      <pre class="javascript">mySort.<span class="me1">swap</span><span class="br0">(</span>element_1, element_2<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>one - (<em>mixed</em>) A string of the id for an Element or an Element reference to swap</li>
        <li>two - (<em>mixed</em>) A string of the id for the <em>other</em> Element or an Element reference to swap</li>
      </ol>
      <h3>Example</h3>
      <pre class="javascript"><span class="kw2">var</span> mySort = <span class="kw2">new</span> Fx.<span class="me1">Sort</span><span class="br0">(</span>$$<span class="br0">(</span><span class="st0">'ul li'</span><span class="br0">)</span><span class="br0">)</span>;
mySort.<span class="me1">swap</span><span class="br0">(</span>$<span class="br0">(</span><span class="st0">'#li3'</span><span class="br0">)</span>, $<span class="br0">(</span><span class="st0">'#li0'</span><span class="br0">)</span><span class="br0">)</span>;

<span class="co1">//OR</span>
mySort.<span class="me1">swap</span><span class="br0">(</span><span class="nu0">3</span>, <span class="nu0">0</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This <a href="#Fx-Sort">Fx.Sort</a> instance.</li>
      </ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
